<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>员工信息修改</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="./css/x-admin.css" media="all">

</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a><cite>首页</cite></a><a><cite>></cite></a><a><cite>员工管理</cite></a>
			<a><cite>></cite></a><a><cite>员工信息</cite></a><a><cite>></cite></a><a><cite>员工信息修改</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:getEmpByName();" title="刷新"><i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<div class="layui-upload">
			<div class="layui-tab layui-tab-brief">
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">
							<form class="layui-form layui-form-pane">
								<div class="layui-tab-item layui-show">
									<c:if test="${list==null}">
										<c:redirect url="EmpServlet?op=getEmp"></c:redirect>
									</c:if>
									<c:if test="${list!=null}">
										<c:forEach items="${list}" var="emp">
											<div class="layui-form-item">
												<label class="layui-form-label"> <span class='x-red'>*</span>员工号
												</label>
												<div class="layui-input-block">
													<input type="text" id="empNo" name="empNo" autocomplete="off" value="${emp.empNo}"
														class="layui-input" readonly="readonly">
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label"> <span class='x-red'>*</span>员工名
												</label>
												<div class="layui-input-block">
													<input type="text" id="empName" name="empName" autocomplete="off" value="${emp.empName}"
														class="layui-input" >
												</div>
											</div>
											<div class="layui-form-item">
												<input type="hidden" id="getDeptNo" value="${emp.deptNo}">
												<input type="hidden" id="getDeptName" value="${emp.deptName}">
												<label class="layui-form-label"> <span class='x-red'>*</span>部门名
												</label>
												<div class="layui-input-block">
													<select class="layui-select" name="deptNo" id="deptNo"></select>
												</div>
											</div>
											<div class="layui-form-item">
												<input type="hidden" id="getEmpXl" value="${emp.empXl}">
												<label class="layui-form-label"> <span class='x-red'>*</span>学历
												</label>
												<div class="layui-input-block">
													<select class="layui-select" name="empXl" id="empXl"></select>
												</div>
											</div>
											<div class="layui-form-item">
												<input type="hidden" id="getEmpSex" value="${emp.empSex}">
												<label class="layui-form-label"> <span class='x-red'>*</span>性别
												</label>
												<div class="layui-input-block">
													<select class="layui-select" name="empSex" id="empSex"></select>
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label"> <span class='x-red'>*</span>身份证
												</label>
												<div class="layui-input-block">
													<input type="text" id="empID" name="empID" autocomplete="off" value="${emp.empID}"
														class="layui-input">
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label"> <span class='x-red'>*</span>入职
												</label>
												<div class="layui-input-block">
													<input type="date" id="empTime" name="empTime" autocomplete="off" value="${emp.empTime}"
														class="layui-input">
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label"> <span class='x-red'>*</span>住址
												</label>
												<div class="layui-input-block">
													<input type="text" id="empAddress" name="empAddress" autocomplete="off" value="${emp.empAddress}"
														class="layui-input">
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label"> <span class='x-red'>*</span>手机号
												</label>
												<div class="layui-input-block">
													<input type="number" id="empTel" name="empTel" autocomplete="off" value="${emp.empTel}"
														class="layui-input">
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label"> <span class='x-red'>*</span>邮箱
												</label>
												<div class="layui-input-block">
													<input type="text" id="empEmail" name="empEmail" autocomplete="off" value="${emp.empEmail}"
														class="layui-input">
												</div>
											</div>
											<div class="layui-form-item">
												<input type="hidden" id="getEmpJob" value="${emp.empJob}">
												<label class="layui-form-label"> <span class='x-red'>*</span>职位
												</label>
												<div class="layui-input-block">
													<select class="layui-select" name="empJob" id="empJob"></select>
												</div>
											</div>
										</c:forEach>
									</c:if>
									<div class="layui-form-item">
										<label for="link" class="layui-form-label">员工照片</label>
										<button type="button" class="layui-btn" id="test1" name="uploadfile">
											<i class="layui-icon">&#xe67c;</i>上传图片
										</button>
										<p>&nbsp;</p>
										<div class="layui-upload-list">
											<label for="link" class="layui-form-label">预览图</label>
											<img class="layui-upload-img" id="demo1" width="100px" height="100px" src="<%=request.getAttribute("empPic")%>">
											<p id="demoText"></p>
										</div>
									</div>
									<div class="layui-form-item">
										<button class="layui-btn" lay-filter="*" lay-submit="" onclick="" id="submit">保存</button>
									</div>
									<div style="height:100px;"></div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	<script src="./js/jquery-2.0.3.js" charset="utf-8"></script>
	<script src="layui/layui.js" charset="utf-8"></script>
	<script src="./js/x-layui.js" charset="utf-8"></script>
	<script>
	layui.use( ['upload','element','form'] , function() {
		$ = layui.jquery;//jquery
		upload = layui.upload;
		
		//普通图片上传
		  upload.render({
		    elem: '#test1'
		    ,url: 'UploadServlet' //改成您自己的上传接口
		    ,accept: 'images'
		    ,field: 'upload'
		    ,before: function(){
		      this.data = {
		    	 empNo : $('input[name="empNo"]').val(),
		    	 op : 'updpic',
		    	 servlet : 'EmpServlet'
		      }
		    }
		    ,choose: function(obj){
		   		obj.preview(function(index, file, result){
		 		  $('#demo1').attr('src', result); //图片链接（base64）
		 		});
		    }
		    ,done: function(res){
		      // res 服务端响应信息
		     	console.log(res.code);
		      if(res.code == 0){
		    	  layer.msg("修改成功!",{icon:6,time:1000});
	                return false;
				} else {
					layer.msg("修改失败!",{icon:5,time:2000});
					return false;
				}
		      return false;
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		      var demoText = $('#demoText');
		      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      demoText.find('.demo-reload').on('click', function(){
		        uploadInst.upload();
		      });
		    }
		  });
		
		// 事件监听  --- 没有修改照片的情况
		  $("#submit").click(function(){
			  $.ajax({
				  type:"post",
				  url:"EmpServlet",
				  data:{
					  empNo : $('input[name = "empNo"]').val(),
					  empName : $('input[name = "empName"]').val(),
					  deptNo : $('select[name = "deptNo"]').val(),
					  empXl : $('select[name = "empXl"]').val(),
					  empSex : $('select[name = "empSex"]').val(),
					  empID : $('input[name = "empID"]').val(),
					  empTime : $('input[name = "empTime"]').val(),
					  empAddress : $('input[name = "empAddress"]').val(),
					  empTel : $('input[name = "empTel"]').val(),
					  empEmail : $('input[name = "empEmail"]').val(),
					  empJob : $('select[name = "empJob"]').val(),
					  op : "updinfo"
				  },
	             success:function (data) {
	                 if(data == "修改成功!" ){
	                	 layer.msg(data,{icon:1,time:1000});
		                    setTimeout(function(){
		                        window.parent.location.reload();
		                        var index = parent.layer.getFrameIndex(window.name);
		                        parent.layer.close(index);
		                    },1000);
		                    return false;
	                 }else{
	                	 layer.msg(data,{icon:5,time:2000});
		                 return false;
	                 }
	                 
	             },
	             dataType:"json"
		      });
			  return false;
		   });
	});
	</script>
	
	<script>
		var xl = ["本科","研究生","硕士","博士","其它"];
		var sex = ["男","女"];
		var job = ["员工","主管","教员"];
		var selectXl = $("#getEmpXl").val();
		var selectSex = $("#getEmpSex").val();
		var selectJob = $("#getEmpJob").val();
		var selectDeptNo = $("#getDeptNo").val();
		var selectDeptName = $("#getDeptName").val();
		console.log(xl);
		$(function(){
			$.get("DeptServlet?op=ajaxDept", function(data) {
				$("#deptNo").append("<option value="+selectDeptNo+">" + selectDeptName + "</option>");
				$.each(data, function(i, o) {
					if(o.deptNo != selectDeptNo){
						$("#deptNo").append("<option value="+o.deptNo+">" + o.deptName + "</option>");
					}
				});
			});
			
			$("#empXl").append("<option value = "+selectXl+">"+selectXl+"</option>");
			$.each(xl,function(i,o){
				if(o != selectXl){
					$("#empXl").append("<option value = "+o+">"+o+"</option>");
				}
			});
			
			$("#empSex").append("<option value = "+selectSex+">"+selectSex+"</option>");
			$.each(sex,function(i,o){
				if(o != selectSex){
					$("#empSex").append("<option value = "+o+">"+o+"</option>");
				}
			});
			
			$("#empJob").append("<option value = "+selectJob+">"+selectJob+"</option>");
			$.each(job,function(i,o){
				if(o != selectJob){
					$("#empJob").append("<option value = "+o+">"+o+"</option>");
				}
			});
			
			$("#empID").blur(function(){
				regCheckID();
			});
			
			$("#empTel").blur(function(){
				regCheckTel();
			});
			
			$("#empEmail").blur(function(){
				regCheckEmail();
			});
		})
		function regCheckID(){
			var cardID = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
			var ID = $('input[name = "empID"]').val();
			if(!cardID.test(ID)){
				layer.msg("身份证格式错误!",{icon:5,time:2000});
			}
		}
		function regCheckTel(){
			var phoneNum = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
			var Tel = $('input[name = "empTel"]').val();
			if(!phoneNum.test(Tel)){
				layer.msg("手机号格式错误!",{icon:5,time:2000});
			}
		}
		function regCheckEmail(){
			var email = /^([A-Za-z0-9_\-\.])+\@(163.com|qq.com|42du.cn)$/;
			var eEmail = $('input[name = "empEmail"]').val();
			if(!email.test(eEmail)){
				layer.msg("邮箱格式错误!",{icon:5,time:2000});
			}
		}
	</script>
</body>
</html>